<!--reactive-->

<!--<script setup>-->
<!--// 导包-->
<!--import {reactive} from 'vue'-->

<!--// 通过 reactive 返回响应式的数据 即数据修改 页面也跟着修改-->
<!--const state = reactive({-->
<!--  count: 1-->
<!--})-->

<!--// 修改数据-->
<!--const changeCount = () => {-->
<!--  state.count++-->
<!--}-->
<!--</script>-->

<!--<template>-->
<!--  {{ state.count }}-->
<!--  <button @click="changeCount">+1</button>-->
<!--</template>-->



<!--ref-->
<script setup>

// ref 接收简单类型和复杂类型 ，返回一个响应式对象

// console 打印对象 发现有个value属性， 原理是外层包了一层对象，包成了复杂对象
// 底层包成复杂对象之后， 再借助reactive 实现返回响应式的对象
// 1.脚本（script） 中 访问数据需要通过 .value，但是template中不需要加

// 推荐： 以后声明数据，统一用ref
import {ref} from 'vue'

const message = ref("使用ref处理简单类型")
const changeMessage = () => {
  console.log(message) // 打印出来是一个对象
  message.value = "4324234"
}
</script>

<template>
  <div>
    {{ message }}
    <button @click="changeMessage">修改显示简单类型</button>
  </div>
</template>
